<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no,email=no">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>在线支付</title>
		<style>
			* {
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}

			body,
			html {
				width: 100%;
				min-height: 100vh;
				background: linear-gradient(#C5D3DE, #E0EEF9);
			}

			#header {
				height: 58px;
				background: #fff;
				display: flex;
				align-items: center;
				padding: 0 10px;
				display: flex;
				justify-content: space-between;
				box-shadow: 0 0 3px 1px #ccc;
				background: linear-gradient(45deg, #2D77F0, #48B6F5);
			}

			#header div:nth-of-type(1) span {
				font-weight: bold;
				font-size: 22px;
				color: #fff;
			}

			#header div:nth-of-type(2) img {
				width: 138px;
			}

			#tips {
				text-align: center;
				color: #555;
				font-size: 14px;
				padding: 4% 5% 5% 5%;
			}

			#tips p {
				margin-top: 4px;
			}

			#hot {
				position: relative;
				padding: 10px 0 20px;
				border: 1px solid #48B6F5;
				margin: 2px;
			}

			#hot::after {
				content: '热门';
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				background-color: #C9D7E2;
				display: inline-block;
				color: #48B6F5;
				top: -12px;
				padding: 0 4px;
			}

			#hot .bank-item {
				width: 20%;
				box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
				text-align: center;
				margin-top: 10px;
				margin-left: 14px;
				padding: 10px 0;
				border-radius: 10px;
				background-color: #E1EFFA;
				display: inline-block;
			}

			#hot .bank-item img {
				width: 38px;
			}

			#hot .bank-item span {
				display: block;
				text-align: center;
				margin: 6px auto 0;
				font-size: 12px;
			}

			.other {
				margin: 20px 2px !important;
				margin-bottom: 40px !important;
			}

			.other::after {
				content: '其他' !important;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				background-color: #D0DEE9 !important;
				display: inline-block;
				color: #48B6F5;
				top: -12px;
				padding: 0 4px;
			}

			.mask {
				position: fixed;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				width: 100%;
				height: 100vh;
				background: rgba(0, 0, 0, .4);
				display: none;
			}

			.popup {
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 320px;
				padding: 20px;
				background-color: #fff;
				border-radius: 8px;
				display: none;
			}

			.popup-title {
				position: relative;
				font-size: 18px;
				text-align: center;
			}

			.popup-title span:nth-of-type(1) {
				margin-left: 15px;
			}

			.popup-title span:nth-of-type(1)::before {
				content: "!";
				position: absolute;
				display: inline-block;
				width: 22px;
				height: 22px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #DDA450;
				color: #fff;
				left: 36%;
				top: 6%;
			}

			.close {
				position: absolute;
				right: -8px;
				top: -20px;
				font-size: 28px;
				color: #999;
			}

			.popup-content {
				padding: 25px 0;
				text-align: center;
				font-size: 14px;
				color: #666;
			}

			.popup-btns {
				display: flex;
				align-items: center;
				justify-content: space-around;
			}

			.popup-btns div {
				width: 42%;
				padding: 10px 20px;
				font-size: 14px;
				border-radius: 40px;
				border: 1px solid #E0E0E0;
				text-align: center;
			}

			.popup-btns div:last-of-type {
				background-color: #78AEF8;
				color: #fff;
				border: 1px solid #78AEF8;
			}
		</style>
	</head>
	<body>
		<!-- 头部 -->
		<div id="header">
			<div id="goReturn">
				<span>在线支付</span>
			</div>
			<div><img src="static/images/yl-logo.png" alt="" /></div>
		</div>

		<!-- 提示 -->
		<div id="tips">
			<p>点击下方对应银行图标进行充值</p>
			<p>确保您手机已安装所选银行的APP</p>
		</div>

		<!-- 热门 -->
		<div id="hot" class="hot"></div>

		<!-- 其他 -->
		<div id="hot" class="other"></div>

		<!-- 弹窗 -->
		<div class="mask"></div>
		<div class="popup">
			<div class="popup-title">
				<span>提示</span>
				<span class="close" onclick="hidePopup()">×</span>
			</div>
			<div class="popup-content">
				跳转到“<span class="popupBank"></span>”APP
			</div>
			<div class="popup-btns">
				<div class="popupCancel" onclick="hidePopup()">取消</div>
				<div class="popupJump">跳转</div>
			</div>
		</div>


		<!-- js -->
		<script src="static/js/zepto.min.js"></script>
		<script src="static/js/indexedList.min.js"></script>
		<script>
			// 热门银行列表
			function initHotBankList(hotBankList) {
				var hotBankList = [{
					"label": "中国银行",
					"value": "6547675",
					"icon": "static/images/bank-logo/zgyh.webp"
				}, {
					"label": "建设银行",
					"value": "55665",
					"icon": "static/images/bank-logo/jsyh.webp"
				}, {
					"label": "中信银行",
					"value": "87645",
					"icon": "static/images/bank-logo/zxyh.webp"
				}, {
					"label": "光大银行",
					"value": "444",
					"icon": "static/images/bank-logo/gdyh.webp"
				}, {
					"label": "民生银行",
					"value": "3123523",
					"icon": "static/images/bank-logo/msyh.webp"
				}, {
					"label": "招商银行",
					"value": "9874",
					"icon": "static/images/bank-logo/zsyh.webp"
				}, {
					"label": "兴业银行",
					"value": "34546",
					"icon": "static/images/bank-logo/xyyh.webp"
				}, {
					"label": "邮政银行",
					"value": "5345",
					"icon": "static/images/bank-logo/yzyh.webp"
				}]
				var hotList = ``;
				hotBankList.forEach((item) => {
					hotList += `<div class="bank-item" data-value="${item.value}" data-icon="${item.icon}" data-label="${item.label}">
						<img src="${item.icon}" alt="">
						<span>${item.label}</span>
					</div>`
				})
				$('#hot').html(hotList);
				// 获取热门银行
				$(".hot .bank-item").on("click", function() {
					let data = {
						label: $(this).attr("data-label"),
						value: $(this).attr("data-value"),
						icon: $(this).attr("data-icon")
					}
					window.localStorage.setItem('bankInfo', JSON.stringify(data));
					// 打开弹窗
					showPopup(data.label);
				});
			}
			initHotBankList();



			// 初始化其他数据列表
			function initList() {
				//模拟数据 - Tips: 请按以下格式生成数据
				const bankLists = [{
					"label": "北京银行", // 银行名称
					"value": "1111", // 银行代码
					"icon": "static/images/bank-logo/bjyh.webp" // 银行logo
				}, {
					"label": "重庆银行",
					"value": "222",
					"icon": "static/images/bank-logo/cqyh.webp"
				}, {
					"label": "成都农商银行",
					"value": "33333333",
					"icon": "static/images/bank-logo/cdnsyh.webp"
				}, {
					"label": "广发银行",
					"value": "333",
					"icon": "static/images/bank-logo/gfyh.webp"
				}, {
					"label": "光大银行",
					"value": "444",
					"icon": "static/images/bank-logo/gdyh.webp"
				}, {
					"label": "华夏银行",
					"value": "555",
					"icon": "static/images/bank-logo/hxyh.webp"
				}, {
					"label": "建设银行",
					"value": "55665",
					"icon": "static/images/bank-logo/jsyh.webp"
				}, {
					"label": "交通银行",
					"value": "6745234",
					"icon": "static/images/bank-logo/jtyh.webp"
				}, {
					"label": "民生银行",
					"value": "3123523",
					"icon": "static/images/bank-logo/msyh.webp"
				}, {
					"label": "农业银行",
					"value": "5432423",
					"icon": "static/images/bank-logo/nyyh.webp"
				}, {
					"label": "浦发银行",
					"value": "31232",
					"icon": "static/images/bank-logo/pfyh.webp"
				}, {
					"label": "平安银行",
					"value": "123123",
					"icon": "static/images/bank-logo/payh.webp"
				}, {
					"label": "四川农信",
					"value": "32143323",
					"icon": "static/images/bank-logo/scnx.webp"
				}, {
					"label": "上海银行",
					"value": "54667",
					"icon": "static/images/bank-logo/shyh.webp"
				}, {
					"label": "苏州农商银行",
					"value": "9896",
					"icon": "static/images/bank-logo/sznsyh2.webp"
				}, {
					"label": "深证农商银行",
					"value": "7645868",
					"icon": "static/images/bank-logo/sznsyh.webp"
				}, {
					"label": "苏州银行",
					"value": "36556",
					"icon": "static/images/bank-logo/szyh.webp"
				}, {
					"label": "兴业银行",
					"value": "34546",
					"icon": "static/images/bank-logo/xyyh.webp"
				}, {
					"label": "邮政银行",
					"value": "5345",
					"icon": "static/images/bank-logo/yzyh.webp"
				}, {
					"label": "中国银行",
					"value": "6547675",
					"icon": "static/images/bank-logo/zgyh.webp"
				}, {
					"label": "中信银行",
					"value": "87645",
					"icon": "static/images/bank-logo/zxyh.webp"
				}, {
					"label": "招商银行",
					"value": "9874",
					"icon": "static/images/bank-logo/zsyh.webp"
				}, {
					"label": "浙商银行",
					"value": "8674534",
					"icon": "static/images/bank-logo/zsyh.webp"
				}];
				var otherList = ``;
				bankLists.forEach((item) => {
					otherList += `<div class="bank-item" data-value="${item.value}" data-icon="${item.icon}" data-label="${item.label}">
						<img src="${item.icon}" alt="">
						<span>${item.label}</span>
					</div>`
				})
				$('.other').html(otherList);

				// 选择银行获取attr属性银行代码
				$(".other .bank-item").on("click", function() {
					let data = {
						label: $(this).attr("data-label"),
						value: $(this).attr("data-value"),
						icon: $(this).attr("data-icon")
					}
					console.log(data)
					window.localStorage.setItem('bankInfo', JSON.stringify(data));

					// 打开弹窗
					showPopup(data.label);

				});
			}
			initList();



			/*
				弹窗操作
				showPopup();  打开，text参数: 银行名称
				hidePopup();  关闭，
			*/
			function showPopup(text) {
				console.log(text)
				$('.popupBank').text(text);
				$('.mask').show();
				$('.popup').show();
			}

			function hidePopup() {
				$('.mask').hide();
				$('.popup').hide();
			}

			// 点击跳转
			$('.popupJump').on('click', function() {
				console.log('点击了跳转')
			})
		</script>
	</body>
</html>